<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            background-color: #7B8CFE;
        }

        .container {
            height: 100%;
            background-color: #7B8CFE;
        }

        .login-wrapper {
            background-color: #fff;
            width: 22.375rem;
            height: 36.75rem;
            border-radius: 0.9375rem;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .btn {
            padding: 10px;
            text-align: center;
            margin-top: 40px;
            background-color: #7B8CFE;
            border: .0625rem solid #7B8CFE;
            color: #fff;
            border-radius: .625rem;
        }

        .btn:hover {
            background-color: #ffffff;
            border: .0625rem solid #7B8CFE;
            color: #000000;
        }

        .msg {
            text-align: center;
            line-height: 5.5rem;
        }

        .login {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>

<body>
    <div class="container" id="root">
        <button class="btn" @click="clearUserData" style="display: none;">清除用户数据（测试用）</button>
        <div class="login-wrapper">
            <div class="header">登录</div>
            <div class="form-wrapper">
                <input type="text" name="username" placeholder="用户名" class="input-item" id="username">
                <input type="password" name="password" placeholder="密码" class="input-item" id="password">
                <div class="btn" @click="login">登录</div>
            </div>
            <div class="msg">
                无账号？
                <a href="./signUp.html" class="login">请注册</a>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="../node_modules/axios/dist/axios.js"></script>
<script>
    Vue.config.productionTip = false; //阻止生成生产提示  
    const v = new Vue({
        el: '#root',
        data: {
            username: document.getElementById("username").value,
            password: document.getElementById("password").value
        },
        mounted() {
            this.onload();
        },
        methods: {
            //清除存储内容，保证内容更新
            onload() {
                localStorage.clear();
            },

            login() {
                //登录
                const data = {
                    userName: document.getElementById("username").value,
                    passWord: document.getElementById("password").value
                }
                if (data.userName && data.passWord) {
                    axios({
                            method: 'POST',
                            data: data,
                            url: 'http://localhost:9999/user/login',
                            timeout: 10000, // 设置超时时间为5000毫秒（5秒）
                            headers: {
                                'Content-Type': 'application/json'
                            },
                        })
                        .then(response => {
                            console.log(response.data);
                            //获取用户信息
                            axios({
                                    method: "GET",
                                    url: "http://localhost:9999/user/info?token=" + response.data.data
                                        .token,
                                })
                                .then(response => {
                                    console.log(response.data);
                                    //存储并传输userData
                                    console.log(response.data.data.userData[0]);
                                    localStorage.setItem('userId', response.data.data.userData[0]
                                        .userId);
                                    localStorage.setItem('position', response.data.data.userData[0]
                                        .position);
                                    localStorage.setItem('userName', response.data.data.userData[0]
                                        .userName);
                                    localStorage.setItem('passWord', response.data.data.userData[0]
                                        .passWord);
                                    localStorage.setItem('totalNumber', response.data.data.userData[0]
                                        .totalNumber);
                                    localStorage.setItem('todayNumber', response.data.data.userData[0]
                                        .todayNumber);
                                    localStorage.setItem('limitedNumber', response.data.data.userData[0]
                                        .limitedNumber);


                                    //跳转到首页页面
                                    window.location.href = "./index.html";
                                })
                                .catch(error => {
                                    console.error('Error', error.message);
                                });
                        })
                        .catch(error => {
                            if (error.response) {
                                // 服务器返回了状态码是error.response.status的响应  
                                console.error(error.response.data);
                                console.error(error.response.status);
                                console.error(error.response.headers);
                            } else if (error.request) {
                                // 请求已发出，但没有收到响应  
                                console.error('Error', error.message);
                            } else {
                                // 发送请求时发生了其他错误  
                                console.error('Error', error.message);
                                alert("您的用户名或密码输入错误！")
                            }
                        });
                } else {
                    alert("请输入账号和密码！")
                }


            },

            //清除用户数据
            clearUserData() {
                console.log('test')
                for (let i = 0; i < localStorage.length; i++) {
                    let key = localStorage.key(i);
                    let value = localStorage.getItem(key);
                    console.log(key, value);
                }
                localStorage.clear();
                for (let i = 0; i < localStorage.length; i++) {
                    let key = localStorage.key(i);
                    let value = localStorage.getItem(key);
                    console.log(key, value);
                }
            }
        },
    })
</script>

</html>